<template>
  <!--header-->
  <div style="background-color: azure">
    <el-row>
      <el-col :span="24">
        <div id="header">
          <marquee>welcome to jia dou。最新公告：黑恶必除,除恶务尽。依法严厉打击黑恶势力,坚决维护人民群众合法权益。</marquee>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="3" :offset="2">
        <div class="logo">
          贾豆
        </div>
      </el-col>
      <el-col :span="8" :offset="1">
        <div class="logo">
          <el-input type="text" placeholder="请输入要搜索的内容" v-model="input" style="width: 80%;float: left"/>
          <el-button icon="el-icon-search" circle></el-button>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="link">
          <el-link type="primary" href="#/reading" :underline="false" class="l_link">读书</el-link>
          <el-link type="success" href="#/music" :underline="false" class="l_link">音乐</el-link>
          <el-link type="warning" href="#/movie" :underline="false" class="l_link">电影</el-link>
          <el-link type="danger" href="#/beanindex" :underline="false" class="l_link">豆品</el-link>
          <el-link type="info" href="#/" :underline="false" class="l_link">关于我们</el-link>
        </div>
      </el-col>
    </el-row>
    <!--main-->
    <el-row style="margin-top: 30px">
      <el-col :span="24">
        <div id="body">
          <el-row class="login">
            <el-col :span="8" :offset="8">
              <div class="form_title">用户注册</div>
              <div class="el-form-item">
                <el-form label-width="60px">
                  <el-form-item label="用户名:">
                    <el-input placeholder="请输入用户名" v-model="user.name"></el-input>
                  </el-form-item>
                  <el-form-item label="密码:">
                    <el-input type="password" placeholder="请输入密码" v-model="user.password"></el-input>
                  </el-form-item>
                  <el-form-item label="手机号:">
                    <el-input placeholder="请输入手机号" v-model="user.telephone"></el-input>
                  </el-form-item>
                  <el-form-item label="验证码:">
                    <el-input placeholder="请输入验证码" v-model="user.code"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <a href="javascript:void(0)" @click="getCode()">点击发送验证码</a>
                    <router-link to="/login">已有账号?前去登录</router-link>
                  </el-form-item>
                  <el-form-item>
                    <el-button @click="userRegister()">注册</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </el-col>
          </el-row>

          <!--footer-->
          <el-row>
            <el-col :span="24">
              <div class="footer">
                © 2020－2020 jiadou.com, all rights reserved
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>

  import axios from 'axios';

  export default {
    name: "register",
    data() {
      return {
        user: {
          name: '',
          password: '',
          telephone: '',
          code: ''
        },
        input: ''
      }
    },
    methods: {
      getCode: function () {
        var tel = this.user.telephone;
        if (tel == '' || tel.length < 0) {
          alert("请输入手机号.");
          return;
        }
        axios.get("/bean/user/getCode", {params: {"telephone": tel}})
          .then(function (response) {
            if ("success" != response.data) {
              alert("当前您的操作有误.");
              return;
            }
          })
      },
      userRegister: function () {
        var _this = this;
        axios.post("/bean/user/userRegister", _this.user)
          .then(function (response) {
            if ("success" == response.data) {
              _this.$router.push("/login");
            }
            if ("codefail" == response.data) {
              alert("验证码输入有误");
            }
            if ("fail" == response.data) {
              alert("该手机用户已注册");
            }
          })
      }

    }
  }
</script>

<style scoped>
  #header {
    width: 100%;
    height: 30px;
    line-height: 30px;
    color: whitesmoke;
    background-color: #545652;
    margin-bottom: 20px;
    letter-spacing: 2px;
    font-size: 14px;
  }

  .logo {
    height: 40px;
    line-height: 40px;
    font-size: 22px;
    font-weight: bold;
  }

  .link {
    height: 40px;
    line-height: 40px;
  }

  .l_link {
    font-weight: bold;
    font-size: 16px;
    margin: 0 15px;
  }

  #body {
    height: 450px;
    background-color: azure;
    /*background-image: url("https://img9.doubanio.com/view/puppy_image/raw/public/16ad990ec23uwn790d4.jpg");*/
  }

  .login {
    height: 450px;
  }

  .form_title {
    height: 50px;
    margin-top: 30px;
    line-height: 40px;
    font-size: 22px;
    font-weight: bold;
  }

  .el-form-item {
    margin: 15px 0;
    font-weight: bold;
  }

  .el-input {
    width: 240px
  }

  .footer {
    height: 60px;
    line-height: 60px;
    /*border: 1px solid skyblue;*/
    background-color: #545652;
    color: whitesmoke;
    font-size: 14px;
  }

</style>
